<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabs选项卡</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- <a href=" https://www.bilibili.com/video/BV1uK411A7S6" target="_blank">链接</a> -->
    <div class="tab">
        <input type="radio" name="tab" id="tab1" checked>
        <input type="radio" name="tab" id="tab2">
        <input type="radio" name="tab" id="tab3">
        <input type="radio" name="tab" id="tab4">
        <input type="radio" name="tab" id="tab5">
        <label for="tab1"><img src="images/1.png" alt="">HTML</label>
        <label for="tab2"><img src="images/2.png" alt="">CSS</label>
        <label for="tab3"><img src="images/3.png" alt="">JavaScript</label>
        <label for="tab4"><img src="images/4.png" alt="">VUE</label>
        <label for="tab5"><img src="images/5.png" alt="">React</label>
        <ul>
            <li>
                <img src="images/1.png" alt="">
                <h2>HTML</h2>
                <p>HTML称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
                </p>
            </li>
            <li>
                <img src="images/2.png" alt="">
                <h2>CSS</h2>
                <p>CSS 指层叠样式表（Cascading Style Sheets）。 在我们的 CSS 教程中，您将学习如何使用 CSS 同时控制整个站点的样式和布局。 通过与 XHTML 结合，CSS
                    可以帮助我们实行表现与结构分离的开发模式。 通过使用 CSS 来提升工作效率！</p>
            </li>
            <li>
                <img src="images/3.png" alt="">
                <h2>JavaScript</h2>
                <p>JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript
                    基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。</p>
            </li>
            <li>
                <img src="images/4.png" alt="">
                <h2>VUE</h2>
                <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue
                    的核心库只关注视图层，方便与第三方库或既有项目整合。</p>
            </li>
            <li>
                <img src="images/5.png" alt="">
                <h2>React</h2>
                <p>React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram
                    的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。</p>
            </li>
        </ul>
    </div>
</body>

</html>